<!DOCTYPE html>

<html  lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
<!--    <base href="<%=basePath%>">-->
    <meta charset="UTF-8">
    <link th:href="@{bootstrap/css/bootstrap.min.css}" type="text/css" rel="stylesheet" />
    <script type="text/javascript" th:src="@{js/jquery-1.11.1-min.js}"></script>
    <script type="text/javascript" th:src="@{bootstrap/js/bootstrap.min.js}"></script>
    <link th:href="@{css/css-1.css}">
    <style type="text/css">
        .tao-define {
            display: flex;
            flex-direction: row;
            align-content: center;
            align-content: center;
            justify-content: center;
        }

        .tao-define span {
            display: block;
            height: 46px;
            font-size: 1.6rem;
            line-height: 46px;
            /*border: 1px solid red;*/
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tao-define > span:nth-child(2) {
            width: 110px;
            display: inline-block;
            text-align-last: right;
        }

        .tao-define > span:nth-child(4) {
            width: 60px;
        }
    </style>
</head>

<body style="background-color:#eeeeee;background-image: url(https://g.alicdn.com/teambition/account-web/0.3.24/images/login-bg.7628d7f.jpg)">
<nav class="navbar navbar-default color" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">BBS</a>
        </div>

        <div class="col-lg-6">
<!--            <ul class="nav navbar-nav">-->
<!--                <li><a href="user/main">首页</a></li>-->
<!--                <li><a href="quesmain.html">问答</a></li>-->
<!--                <li><a href="help.html">帮助中心</a></li>-->
<!--                <li><a href="mine.html">我的</a></li>-->
<!--                <li>-->
<!--                    <form class="form-inline" style="margin-top:8px ">-->
<!--                        <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search">-->
<!--                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>-->
<!--                    </form>-->
<!--                </li>-->
<!--            </ul>-->

        </div>

        <div class="col-lg-2 col-lg-offset-2">
            <ul class="nav navbar-nav">
                <li ><a  href="login.html">登录</a></li>
                <li ><a  href="user/register.html">注册</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container  color" style="height: 600px;background-color: #ffffff;border-radius: 15px;margin-top: 50px;margin-bottom: 50px">
    <div class="row" style="display: flex;flex-direction: row;align-content: space-between;box-shadow:0 4px 6px rgba(0,0,0,0.1), 0 12px 20px rgba(38, 38, 38,0.12)">
        <img src="image/register.png" style=" height: 100%;width: 50%;position: center;margin: 10px;border-radius: 15px">
        <form class="form-horizontal  " style="margin-top: 100px;width: 50%;display: flex;flex-direction:column;align-items: center" role="form">
            <h3 class="form-title" style="font-size: 2em;color: #6c63ff;">登录</h3>
            <div style="width: 50px;height: 4px;border-radius: 45px;background-color: #6c63ff;margin-top: -7px;margin-bottom: 23px"></div>
            <div class="col-sm-9 col-md-9 ">
                <div class="form-group input-group-lg tao-define">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <input class="form-control" type="text" name="username" id="loginAct" placeholder="请输入账号">
                    <span id="loginActSpan" style="color: green"></span>
                </div>
                <div class="form-group input-group-lg tao-define">
                    <i class="fa fa-key" aria-hidden="true"></i>
                    <input class="form-control " type="password" name="password" id="loginPwd" placeholder="请输入密码">
                    <span id="loginPwdSpan" style="color: green"></span>
                </div>
                <div class="form-group input-group-lg tao-define">
                    <i class="fa fa-key" aria-hidden="true"></i>
                    <input class="form-control " type="text" name="verifyCode" id="verifyCode"
                           placeholder="请输入验证码">
                    <span id="loginPwdComfirmSpan" style="color: green"></span>
                    <img class="verifyCode" src="user/getVerifyCode" width="40%"/>
                </div>
                <div class="form-group " style="display: flex;flex-direction: row;align-items:center;align-content:space-between;justify-content: space-between">
                    <span id="msg" style="color: red;display: flex;width: 140px;height: 20px"></span>
                    <span style="display:flex;">没有账号？立即<a href="user/register.html" style="color: #6c63ff">注册</a></span>

                </div>

                <div class="form-group " style="display: flex;flex-direction: row;align-items:center;align-content:space-between;justify-content: space-between">
                    <span  style="color: red;display: flex;width: 140px;height: 20px"></span>
                    <span style="display: block">跳转到<a href="admin/loginPage.html" style="color: #6c63ff">管理员登录页面</a></span>
                </div>



                <div class="form-group" >
                    <button id="submitBtn" class="btn btn-primary btn-lg btn-block" style="background-color: #6c63ff;">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
    <div class="modal-footer" style="margin-top: 10px">
        <div align="center"><a>Powered by 斌斌家豪涛顺 &nbsp;&nbsp;联系我们</a></div>
    </div>
</body>
</html>


<script>
    $(function () {
        $("button").click(function (ev) {
            ev.preventDefault();
        })
        $("#loginAct").val("");
        $("#loginAct").focus();
        $("#submitBtn").click(function () {
            login();
        })
        $(".verifyCode").click(function (){
            //加时间戳，防止浏览器利用缓存
            var src = "user/getVerifyCode?"+new Date().getTime();
            $('.verifyCode').attr("src",src);
        })
    })

    function login() {
        var loginAct = $.trim($("#loginAct").val());
        var loginPwd = $.trim($("#loginPwd").val());
        var verifyCode = $.trim($("#verifyCode").val())
        if(loginAct == "" || loginPwd == ""||verifyCode == ""){
            $("#msg").html("账号密码验证码为空");
            return false;
        }
        $.ajax({
            url:"user/login",
            data:{
                "loginAct":loginAct,
                "loginPwd":loginPwd,
                "verifyCode":verifyCode
            },
            type:"post",
            dataType:"json",
            success: function (data) {
                if(data.success){
                    $.ajax({
                        url:"user/pageList?",
                        type:"post",
                        data:{
                            "pageNum":"1",
                            "pageSize":"3",
                        },
                        dataType:"json",
                        success:function (){
                            window.location.href = "/user/main"
                        }
                    })
                }else {
                    $("#msg").html(data.msg);
                }

            }
        })
    }
</script>